<nav class="ui top secondary menu" style="overflow-x: auto">
  <div class="item">
    <i class="inverted big link bullseye icon dream-flip-toggle" title="{{ i18n "flip" }}"></i>
  </div>
  {{ if .Site.Params.email }}
  <div class="item">
    <a href="mailto:{{ .Site.Params.email }}">
      <i class="inverted big mail icon" title="email"></i>
    </a>
  </div>
  {{ end }}
  {{ if .Site.Params.github }}
  <div class="item">
    <a href="https://github.com/{{ .Site.Params.github }}" target="_blank">
      <i class="inverted big github icon" title="github"></i>
    </a>
  </div>
  {{ end }}
  {{ if .Site.Params.linkedin }}
  <div class="item">
    <a href="https://www.linkedin.com/in/{{ .Site.Params.linkedin }}" target="_blank">
      <i class="inverted big linkedin icon" title="linkedin"></i>
    </a>
  </div>
  {{ end }}
  {{ if .Site.Params.stackoverflow }}
  <div class="item">
    <a href="https://www.stackoverflow.com/users/{{ .Site.Params.stackoverflow }}" target="_blank">
      <i class="inverted big stack overflow icon" title="stackoverflow"></i>
    </a>
  </div>
  {{ end }}
  {{ if .Site.Params.codepen }}
  <div class="item">
    <a href="https://codepen.io/{{ .Site.Params.codepen }}" target="_blank">
      <i class="inverted big codepen icon" title="codepen"></i>
    </a>
  </div>
  {{ end }}
</nav>

<div class="ui centered grid about">
  <div class="fifteen wide mobile fifteen wide tablet fifteen wide computer column">

    <section class="ui stacked segments">
      <header class="ui inverted segment">
        <h2 class="ui header">
          {{ if .Site.Params.aboutHeader }}
          {{- .Site.Params.aboutHeader -}}
          {{ else }}
          {{- i18n "aboutHeader" -}}
          {{ end }}
        </h2>
      </header>

      <article class="ui inverted segment back-about">
        <div class="ui stackable three column grid">
          <div class="column">
              {{ if (fileExists "/content/about/desc.md") }}
              {{ readFile "/content/about/desc.md" | markdownify | emojify }}
              {{ end }}
          </div>
          <div class="column">
              {{ if (fileExists "/content/about/desc-center.md") }}
              {{ readFile "/content/about/desc-center.md" | markdownify | emojify }}
              {{ end }}
          </div>
          <div class="column">
              {{ if (fileExists "/content/about/desc-right.md") }}
              {{ readFile "/content/about/desc-right.md" | markdownify | emojify }}
              {{ end }}
          </div>
        </div>
      </article>

      {{ if .Site.Copyright }}
      <footer class="ui secondary segment">
        {{ .Site.Copyright | safeHTML }}
      </footer>
      {{ end }}

      {{ if findRE "post/.+" .RelPermalink }}
      {{ else }}
        {{ if and .Site.DisqusShortname  }}
        <footer class="ui secondary segment">
          <div id="disqus_thread"></div>
          <script>
          /**
          *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
          *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
          /*
          */

          var disqus_config = function () {
          this.page.url = '{{ .Permalink }}about';  // Replace PAGE_URL with your page's canonical URL variable
          this.page.identifier = '/about'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
          };

          (function() { // DON'T EDIT BELOW THIS LINE
          var d = document, s = d.createElement('script');
          s.src = 'https://' + '{{ .Site.DisqusShortname }}' + '.disqus.com/embed.js';
          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
          })();
          </script>
          <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
        </footer>
        {{ end }}
      {{ end }}
    </section>

  </div>
</div>
